<template>
    <div>
    <div class="crumbs">
        <el-breadcrumb>
            <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 表单 </el-breadcrumb-item>
            <el-breadcrumb-item> 图片上传 </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="container">
        <div class="plugins-tips">
            <div class="content-title"> 支持拖拽</div>
        </div>
        <el-upload
            class="upload-demo"
            drag
            action="/upload"
            multiple
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">文件大小不能超过500k</div>
        </el-upload>

        <el-button type="primary" @click="exprot()">
            导出Excel
        </el-button>

         <el-button type="primary" @click="visible=true">           
             导入Excel
         </el-button>
        <!-- //点击按钮，出现弹框
        //弹框
        <el-dialog :visible.sync="visible">
            <el-form>
                <el-form-item label="文件" prop="file">
                <el-input v-model="fileName" :disabled="true"></el-input><br>
                <el-upload class="upload-demo" ref="upload" action="doUpload" :limit="1" :before-upload="beforeUpload">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过5MB</div>
                </el-upload>
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="submitUpload()">确定</el-button>        
                </el-form-item> 
                </el-form>
        </el-dialog> -->

        <!-- <div class="crop-demo">
            <img :src="cropImg" class="pre-img">
            <div class="crop-demo-btn"> 选择图片
                <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
            </div>
        </div>
        
        <el-dialog title="裁剪图片" :visible.sync="dialogVisible" width="30%">
            <vue-cropper ref='cropper' :src="imgSrc" :ready="cropImage" :zoom="cropImage" tyle="width:100%;height:300px;">
            </vue-cropper>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelCrop">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
            </span>
        </el-dialog> -->
    </div>
    </div>
</template>


<script>
export default {
    name:'upload',
    data:function(){
        return{
            defaultSrc: require('../../assets/img/img.jpg'),
            fileList:[],
            imgSrc:'',
            cropImg:'',
            dialogVisible:false,
        }
    },
    components:{

    },
    methods:{
        exprot(){
            // 导出
            window.open("/exportexcel","_parent")
        },
        setImage(e){
            
        },
        cropImg(){
            
        },
        cancelCrop(){
            this.cropImg = this.defaultSrc;
        },
        imageuploaded(res){
            console.log(res);
        },
        handleError(){
            this.$notify.error({
                title:'上传文件失败',
                message:'api 异常'
            });
        }
    },
    created(){
        this.cropImg = this.defaultSrc;
    }
  
}
</script>


<style scoped>
    .content-title{
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }
    .pre-img{   
        width: 100px;
        height: 100px;
        background: #f8f8f8;
        border: 1px solid #eee;
        border-radius: 5px;
    }
    .crop-demo{
        display: flex;
        align-items: flex-end;
    }
    .crop-demo-btn{
        position: relative;
        width: 100px;
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        margin-left: 30px;
        background-color: #409eff;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        box-sizing: border-box;
    }
    .crop-input{
        position: absolute;
        width: 100px;
        height: 40px;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }

</style>






